01_2_3 円環に沿った線
時系列変化をビジュアライズし、ダイナミズムを表現する
サンプルコード：sketch01_2_3
https://gyazo.com/42593be76141b4fd2e5caec8f17614df
隣接する点間を線で繋ぐ
line( )を使って、時系列上の前の点と次の点のあいだに線を引きます。
code:sketch01_2_3.pde
void draw(){
...
for(int i=0; i<verts.size(); i++){
strokeWeight(plot_size);
stroke( hue(verts.get(i).cl), saturation(verts.get(i).cl), brightness(verts.get(i).cl), 255*plot_alpha);
//隣接する点間を結ぶ
if(i < verts.size()-1)
line(verts.get(i).x, verts.get(i).y, verts.get(i).z, verts.get(i+1).x, verts.get(i+1).y, verts.get(i+1).z);
}
...
}
Visualization
https://gyazo.com/42593be76141b4fd2e5caec8f17614df
sketch01_2_3 全体図
https://gyazo.com/4d834babf2641c719fa742b9a7ef8531
sketch01_2_3 細部を見ると、よりダイナミックな変化を感じることができます。
色を補間した線を引く
前のサンプルでは、前の点に指定した色で一様に線が描画されてしまっています。sketch01_2_2で行ったように、前の色と後の色を補間しながら線を引くことで滑らかに色をつなぎます。
code: sketch01_2_3_1.pde
void draw(){
...
beginShape();
noFill();
strokeWeight(plot_size);
for(int i=0; i<verts.size(); i++){
stroke( hue(verts.get(i).cl), saturation(verts.get(i).cl), brightness(verts.get(i).cl), 255*plot_alpha); //頂点の色
vertex(verts.get(i).x, verts.get(i).y, verts.get(i).z); //頂点の座標
}
endShape();
...
}
Visualization
https://gyazo.com/72ec6fda6c0fba8bc7c95fbffbecccb4
sketch02_3_1 前回に比べて、線の色がなめらかにつながっている。
https://gyazo.com/da295265bed7cf05aaa80c1ff2ab60ca
sketch02_3_1 細部の様子。